<template>
  <div class="infrastructure-page">
    <h2 class="content-title">交通基础设施解决方案</h2>
    
    <div class="solution-intro">
      <div class="solution-image">
        <img src="http://www.sutpc.com/resource/sutpc/images/solution-infrastructure.jpg" alt="交通基础设施解决方案">
      </div>
      <div class="solution-desc">
        <p>中空领航交通基础设施解决方案，面向高速公路、城市道路、轨道交通等交通基础设施提供全生命周期的数字化管理服务，覆盖规划、设计、建设、运营、维护全过程。</p>
        <p>我们利用BIM、GIS、IOT、AI等先进技术，构建交通基础设施数字孪生体系，实现交通基础设施的科学规划、精细建设、智能管养与高效运营，提升基础设施价值。</p>
      </div>
    </div>

    <div class="solution-scope">
      <h3 class="section-title">应用范围</h3>
      <div class="scope-container">
        <div class="scope-item">
          <div class="scope-icon">
            <img src="http://www.sutpc.com/resource/sutpc/images/icon-highway.svg" alt="高速公路">
          </div>
          <div class="scope-name">高速公路</div>
        </div>
        
        <div class="scope-item">
          <div class="scope-icon">
            <img src="http://www.sutpc.com/resource/sutpc/images/icon-urban-road.svg" alt="城市道路">
          </div>
          <div class="scope-name">城市道路</div>
        </div>
        
        <div class="scope-item">
          <div class="scope-icon">
            <img src="http://www.sutpc.com/resource/sutpc/images/icon-subway.svg" alt="轨道交通">
          </div>
          <div class="scope-name">轨道交通</div>
        </div>
        
        <div class="scope-item">
          <div class="scope-icon">
            <img src="http://www.sutpc.com/resource/sutpc/images/icon-bridge.svg" alt="桥梁隧道">
          </div>
          <div class="scope-name">桥梁隧道</div>
        </div>
        
        <div class="scope-item">
          <div class="scope-icon">
            <img src="http://www.sutpc.com/resource/sutpc/images/icon-hub.svg" alt="交通枢纽">
          </div>
          <div class="scope-name">交通枢纽</div>
        </div>
        
        <div class="scope-item">
          <div class="scope-icon">
            <img src="http://www.sutpc.com/resource/sutpc/images/icon-charging.svg" alt="充电设施">
          </div>
          <div class="scope-name">充电设施</div>
        </div>
      </div>
    </div>

    <div class="solution-features">
      <h3 class="section-title">解决方案特点</h3>
      <div class="features-grid">
        <div class="feature-card">
          <h4 class="feature-title">数字孪生 一体管控</h4>
          <p class="feature-desc">构建交通基础设施的数字孪生模型，实现对基础设施的可视化、数字化管理，支持沉浸式查看、漫游和交互。</p>
        </div>
        
        <div class="feature-card">
          <h4 class="feature-title">智能感知 实时监测</h4>
          <p class="feature-desc">利用物联网技术，对基础设施运行状态进行实时监测和异常预警，保障基础设施安全稳定运行。</p>
        </div>
        
        <div class="feature-card">
          <h4 class="feature-title">数据驱动 精准决策</h4>
          <p class="feature-desc">基于大数据分析，为基础设施规划、建设和运维提供数据支撑，实现科学决策和精准管理。</p>
        </div>
        
        <div class="feature-card">
          <h4 class="feature-title">全生命周期 系统管理</h4>
          <p class="feature-desc">覆盖基础设施从规划设计、施工建设到运营维护的全生命周期，形成闭环管理体系。</p>
        </div>
      </div>
    </div>

    <div class="solution-systems">
      <h3 class="section-title">核心系统</h3>
      <div class="systems-container">
        <div class="system-item">
          <div class="system-image">
            <img src="http://www.sutpc.com/resource/sutpc/images/system-plan.jpg" alt="交通规划设计系统">
          </div>
          <div class="system-content">
            <h4>交通规划设计系统</h4>
            <div class="system-desc">
              <p>基于交通大数据和数字孪生技术，为交通基础设施规划设计提供数据支撑和智能辅助工具，实现方案多维评估与优化。主要功能包括：</p>
              <ul>
                <li>交通需求分析与预测</li>
                <li>多方案设计与比选</li>
                <li>方案评估与优化</li>
                <li>BIM与GIS集成应用</li>
                <li>交通仿真分析</li>
              </ul>
            </div>
          </div>
        </div>
        
        <div class="system-item">
          <div class="system-image">
            <img src="http://www.sutpc.com/resource/sutpc/images/system-construct.jpg" alt="智慧工程建设系统">
          </div>
          <div class="system-content">
            <h4>智慧工程建设系统</h4>
            <div class="system-desc">
              <p>围绕交通基础设施建设过程，提供从施工准备到竣工验收的全过程数字化管理方案，提升建设质量和效率。主要功能包括：</p>
              <ul>
                <li>工程进度管理</li>
                <li>质量安全管控</li>
                <li>视频监控与现场巡检</li>
                <li>智能物料管理</li>
                <li>工程验收管理</li>
              </ul>
            </div>
          </div>
        </div>
        
        <div class="system-item">
          <div class="system-image">
            <img src="http://www.sutpc.com/resource/sutpc/images/system-maintain.jpg" alt="设施运维管理系统">
          </div>
          <div class="system-content">
            <h4>设施运维管理系统</h4>
            <div class="system-desc">
              <p>针对交通基础设施运营阶段，提供设备设施的智能化运维管理平台，实现状态监测、预测性维护和高效运营。主要功能包括：</p>
              <ul>
                <li>设施健康监测</li>
                <li>预测性维护</li>
                <li>智能巡检管理</li>
                <li>应急处置管理</li>
                <li>运维数据分析</li>
              </ul>
            </div>
          </div>
        </div>
        
        <div class="system-item">
          <div class="system-image">
            <img src="http://www.sutpc.com/resource/sutpc/images/system-traffic.jpg" alt="交通运行管理系统">
          </div>
          <div class="system-content">
            <h4>交通运行管理系统</h4>
            <div class="system-desc">
              <p>围绕交通基础设施的运行效能，提供交通流监测与管理、交通组织优化等功能，提升基础设施的使用效率。主要功能包括：</p>
              <ul>
                <li>交通流实时监测</li>
                <li>通行能力分析</li>
                <li>交通组织管理</li>
                <li>信号控制优化</li>
                <li>交通事件处置</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="solution-cases">
      <h3 class="section-title">典型案例</h3>
      <div class="cases-container">
        <div class="case-item">
          <div class="case-image">
            <img src="http://www.sutpc.com/resource/sutpc/images/case-highway.jpg" alt="智慧高速公路案例">
          </div>
          <div class="case-content">
            <h4>G5京昆高速智慧公路项目</h4>
            <p>为G5京昆高速某路段打造的智慧公路解决方案，构建了全线的数字孪生模型，实现对道路、桥梁、隧道等设施的状态监测和智能管理，通过AI视频分析实现交通流量监测、事件自动识别与预警，降低了运维成本30%，提升了安全事件处置效率50%，获得业主高度评价。</p>
          </div>
        </div>
        
        <div class="case-item">
          <div class="case-image">
            <img src="http://www.sutpc.com/resource/sutpc/images/case-metro.jpg" alt="轨道交通案例">
          </div>
          <div class="case-content">
            <h4>深圳地铁20号线智能化工程</h4>
            <p>为深圳地铁20号线提供的全过程智能化解决方案，覆盖工程建设和运营维护全周期。在建设阶段，通过BIM+GIS技术实现施工进度和质量可视化管理；在运营阶段，通过传感器监测和AI分析，实现设备设施的状态监测和预测性维护，提升了运营安全性，延长了设备使用寿命，降低了维护成本。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'InfrastructurePage'
}
</script>

<style scoped>
.infrastructure-page {
  max-width: 100%;
}

.content-title {
  font-size: 28px;
  color: var(--primary-color);
  margin-bottom: 30px;
  position: relative;
  padding-bottom: 15px;
}

.content-title:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: var(--secondary-color);
}

.solution-intro {
  display: flex;
  gap: 40px;
  margin-bottom: 60px;
}

.solution-image {
  flex: 0 0 50%;
}

.solution-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.solution-desc {
  flex: 0 0 50%;
}

.solution-desc p {
  font-size: 16px;
  line-height: 1.8;
  color: #444;
  margin-bottom: 20px;
}

.section-title {
  font-size: 24px;
  color: var(--text-color);
  margin-bottom: 30px;
  position: relative;
  padding-bottom: 15px;
}

.section-title:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background-color: var(--secondary-color);
}

.solution-scope {
  margin-bottom: 60px;
}

.scope-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.scope-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.scope-icon {
  width: 80px;
  height: 80px;
  background-color: #f5f5f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.scope-item:hover .scope-icon {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  background-color: var(--primary-color-light);
}

.scope-icon img {
  width: 40px;
  height: 40px;
}

.scope-name {
  font-weight: bold;
  color: var(--text-color);
}

.solution-features {
  margin-bottom: 60px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.feature-card {
  background-color: #f8f8f8;
  border-radius: 8px;
  padding: 30px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.feature-title {
  font-size: 18px;
  color: var(--primary-color);
  margin-bottom: 15px;
  position: relative;
  padding-left: 20px;
}

.feature-title:before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 10px;
  height: 10px;
  background-color: var(--secondary-color);
  border-radius: 50%;
}

.feature-desc {
  color: #666;
  line-height: 1.6;
}

.systems-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 60px;
}

.system-item {
  display: flex;
  gap: 30px;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.system-image {
  flex: 0 0 35%;
}

.system-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.system-content {
  flex: 1;
  padding: 25px 25px 25px 0;
}

.system-content h4 {
  font-size: 20px;
  color: var(--primary-color);
  margin-bottom: 15px;
}

.system-desc p {
  color: #555;
  line-height: 1.8;
  margin-bottom: 15px;
}

.system-desc ul {
  padding-left: 20px;
}

.system-desc li {
  color: #666;
  margin-bottom: 10px;
  position: relative;
}

.cases-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.case-item {
  display: flex;
  gap: 30px;
  background-color: #f8f8f8;
  border-radius: 8px;
  overflow: hidden;
}

.case-image {
  flex: 0 0 40%;
}

.case-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-content {
  flex: 1;
  padding: 30px 30px 30px 0;
}

.case-content h4 {
  font-size: 20px;
  color: var(--primary-color);
  margin-bottom: 15px;
}

.case-content p {
  color: #555;
  line-height: 1.8;
}

@media (max-width: 1200px) {
  .scope-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .solution-intro {
    flex-direction: column;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .system-item,
  .case-item {
    flex-direction: column;
  }
  
  .system-image,
  .case-image {
    height: 250px;
  }
  
  .system-content,
  .case-content {
    padding: 25px;
  }
}

@media (max-width: 768px) {
  .scope-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .scope-container {
    grid-template-columns: 1fr;
  }
}
</style> 